<template>
  <uni-popup ref="popup" type="right" :is-mask-click="false">
    <view class="filter-scroll-view">
      <view class="filter-mask" @click="toggle"></view>
      <view>
        <scroll-view class="scroll-view-box" scroll-y="true">
          <u-gap bgColor="#fff" height="20"></u-gap>
          <CuFilterDictLabel
            v-if="showArr.indexOf('progress') > -1"
            title="项目进度"
            :dict-list="ticketProgressList"
            v-model="searchData.workProgress"
          />
          <view class="cu-padding-left-30">
            <cu-cell title="项目负责人" link :description="searchData.directorName" @click="showApprovePicker">
            </cu-cell>
            <cu-cell title="所属部门" link :description="searchData.deptName" @click="deptClick"> </cu-cell>
            <cu-cell title="所属区域" link :description="searchData.areaName" @click="showFactoryPicker"> </cu-cell>
          </view>

          <!-- 用户选择器 v2 -->
          <cu-dept-user-select
            ref="approvePicker"
            :checkList="approveCheckList"
            @change="approvePickerChange"
          ></cu-dept-user-select>
          <dept-selector ref="deptSelectorRef" @change="onDeptSelectorChange" />
          <second-area-picker ref="secondFactory" @confirm="secondFactoryConfirm"></second-area-picker>
        </scroll-view>
        <view class="btn-wrap">
          <view class="reset" @click="resetHandler">重置条件</view>
          <view class="confirm" @click="submitHandler">搜索</view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import CuCell from '@/components/cu-cell/cu-cell.vue'
import DeptSelector from '@/components/dept-selector/index.vue'
import CuFilterDictLabel from './components/cu-filter-dict-label.vue'
import SecondAreaPicker from './components/secondAreaPicker.vue'
import store from '../../store'
import CuDeptUserSelect from '@/components/cu-dept-user-select/cu-dept-user-select.vue'

export default {
  name: 'CuFilter',
  components: {
    CuDeptUserSelect,
    CuFilterDictLabel,
    CuCell,
    DeptSelector,
    SecondAreaPicker
  },
  data() {
    return {
      approveCheckList: [],
      showTime: false,
      show: false,
      // 分厂
      secondAreas: [],
      // 项目进度
      ticketProgressList: [
        {
          dictLabel: '未启动',
          dictValue: 1
        },
        {
          dictLabel: '进行中',
          dictValue: 2
        },
        {
          dictLabel: '已完成',
          dictValue: 3
        }
      ],
      searchData: {
        workProgress: undefined,
        directorName: store.getters.name,
        directorId: store.getters.staffId,
        deptName: undefined,
        deptId: undefined,
        areaName: undefined,
        areaId: undefined
      }
    }
  },
  props: {
    id: {
      type: [Number, Array, String]
    },
    showArr: {
      type: Array,
      default: () => []
    }
  },

  methods: {
    async toggle() {
      if (this.show) {
        this.show = false
        this.showTime = false
        this.$refs.popup.close()
      } else {
        this.show = true
        this.$refs.popup.open()
        // 时间组件加载耗时，延迟加载
        this.$nextTick(() => {
          setTimeout(() => {
            this.showTime = true
          }, 100)
        })
      }
    },
    showApprovePicker() {
      this.approveCheckList = this.searchData.directorId
        ? [
            {
              name: this.searchData.directorName,
              userId: this.searchData.directorId
            }
          ]
        : []
      this.$refs.approvePicker.open()
    },
    approvePickerChange(obj) {
      if (!obj?.length) {
        return
      }
      this.searchData.directorId = obj[0].userId
      this.searchData.directorName = obj[0].name
    },
    deptClick() {
      this.$refs.deptSelectorRef.open()
    },
    onDeptSelectorChange({ name, value }) {
      this.searchData.deptId = value
      this.searchData.deptName = name
    },
    showFactoryPicker() {
      this.$refs.secondFactory.open()
    },
    secondFactoryConfirm(obj) {
      this.searchData.areaId = obj.value
      this.searchData.areaName = obj.name
    },
    resetHandler() {
      this.searchData = {
        workProgress: '',
        directorName: '',
        directorId: '',
        deptName: '',
        deptId: undefined,
        areaName: '',
        areaId: undefined
      }
    },
    submitHandler() {
      this.$emit('submit', this.searchData)
      this.toggle()
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-scroll-view {
  width: 100vw;
  height: 100vh;
  display: flex;

  .filter-mask {
    flex: 1;
  }

  .scroll-view-box {
    width: 672rpx;
    background: #fff;
    box-sizing: border-box;
    height: calc(100vh - 220rpx);
    /* #ifdef APP-PLUS */
    height: calc(100vh - 140rpx);
    /* #endif */
  }

  .btn-wrap {
    background: #fff;
    display: flex;
    justify-content: space-around;
    padding-top: 30rpx;
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));

    .reset,
    .confirm {
      width: 292rpx;
      line-height: 80rpx;
      background: #ffffff;
      font-size: 32rpx;
      text-align: center;
    }

    .reset {
      color: #666666;
      background: #ffffff;
      border: 1rpx solid #cccccc;
    }

    .confirm {
      background: #2ac0c8;
      color: #fff;
    }
  }
}

.ticketCode {
  margin-bottom: 25rpx;
  // margin-top: 25rpx;
  padding: 0 15px;

  .cu-cell__item {
    margin-top: -13px;
  }

  .title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    padding: 0 0 20rpx 30rpx;
  }

  .input {
    margin-left: 35rpx;
    width: 90%;
  }
}
</style>
